<template>
  <div style="height:100%">
    <Title title="抗原数据统计" @click-more='handleClickMore'>
      <acc-radio v-model="currentCheck" :options='options'></acc-radio>
    </Title>
    <AccPie class="acc-pie" :echartData='echartData' :color="['#5470c6', '#91cc75', '#ee6766']">
      <div>
        <div>全校人数：{{allTotal}}人</div>
        <div>已上报：{{reportTotal}}人</div>
        <div :class="{'mb-20': index === 0}" :style="{'color': colorList[index]}" v-for="(item, index) in echartData" :key="index">{{item.name}}：{{item.value}}人</div>
      </div>
    </AccPie>
  </div>
</template>

<script>
import { getSceneList, getAdminAntigenStatistics } from '@/views/children/antiepidemic/js/statisticalAnalysis'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import Title from '../Title'
import AccRadio from '@/components/common/AccRadio'
import AccPie from '../common/AccPie'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { Title, AccRadio, AccPie },
  data () {
    return {
      currentCheck: '学生',
      options: [ '学生', '教师', '全部' ],
      colorList: [ '', '#429d42', '#f74343' ],
      echartData: [],
      reportTotal: 0,
      allTotal: 0
    }
  },
  watch: {
    currentCheck: {
      handler () {
        this.getData()
      },
      immediate: true
    }
  },
  methods: {
    handleClickMore () {
      this.$router.push({ path: '/antiepidemic/health' })
    },
    getData () {
      const api = this.currentCheck === '全部' ? getSceneList : getAdminAntigenStatistics
      let userTypeJSon = {
        '学生': '0',
        '教师': '1'
      }
      api({
        tenantNo: Vue.ls.get(USER_INFO).tenantNo,
        flag: 2,
        userType: userTypeJSon[this.currentCheck] || ''
      }).then(res => {
        console.log(res)
        const { code, data } = res
        if (code === 0) {
          const antigenStatisticsJson = this.currentCheck === '全部' ? data.antigenStatisticsJson : data
          this.echartData = [
            { name: '未上报', value: antigenStatisticsJson.notReportTotal || 0 },
            { name: '阴性', value: antigenStatisticsJson.yinTotal || 0 },
            { name: '阳性', value: antigenStatisticsJson.yangTotal || 0 }
          ]
          this.reportTotal = antigenStatisticsJson.reportTotal || 0
          this.allTotal = antigenStatisticsJson.allTotal || antigenStatisticsJson.total || 0
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.el-card {
  display: flex;
  flex-direction: column;
  .acc-pie {
    flex: 1;
  }
}
</style>
